<template>
	<view class="join_bgc_list_box">
		<Tips />
		<view v-if="!joinBgcList.length">
			<view class="load_box">
				<uni-load-more :content-text="contentText" iconType="circle" :color="primary_hot_color"
					:status="loadingStatus" />
			</view>
			<MyNull img="nullEstate.png" />
		</view>
		<template v-else>
			<scroll-view
				class="scroll-view_H" 
				scroll-x="true" 
				@scroll="scroll"
			>
				<view v-for="item in bgcTyps" :key="item.id" class="scroll-view-item_H">
					<view
						@click="chooseShowBgcType(item.id)" 
						:class="['content',{'content_active' : item.id === showBgcTypeIndex}]"
					>
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view 
				scroll-y="true" 
				class="scroll-Y"
				@scrolltolower="lowerBgcsFun"
			>
				<view class="content">
					<view class="handle">
						<view class="set_count_box">
							<view class="count text_ellipsis">
								剩余：{{changeNums(mineDormitoryInfo?.set_join_bgc_count,100)}} 次修改次数
							</view>
						</view>
						<view class="invate_help">
							<view 
								class="item" 
								@click="clickHaveHelpList"
							>
								<view class="text_ellipsis">我收到的助力</view>
							</view>
							<view class="line"></view>
							<view class="item" @click="clickInviteHelp">
								<view class="text_ellipsis">助力得到次数</view>
							</view>
						</view>
					</view>
					<view 
						v-for="(item,index) in joinBgcList" 
						:key="item.id" 
						@click="chooseBgc(item)"
						class="scroll-view-item"
					>
						<image
							:class="[{'img' : item.id===chooseBgcId}]"
							:style="`
								width: 100%; 
								height: 100%; 
								border-radius: 26rpx;
								border: 1rpx solid ${item.border_color};`"
							:src="joinJoinBgcImg(item.bgc_url)"/>
						<view :class="['bgc_info',{'bgc_info_active' : item.id===chooseBgcId}]">
							<view class="item" v-if="showBgcTypeIndex!=='3'">
								<MyIcons size="30rpx" :src="joinSystemPath('jing.png')"/>
								<view class="title text_ellipsis">
									{{item.name}}
								</view>
							</view>
							<view class="item" v-else>
								<MyIcons size="30rpx" :src="joinSystemPath('hot.png')"/>
								<view class="title text_ellipsis">
									&nbsp;{{item.hotNum}}
								</view>
							</view>
						</view>
						<view class="choose_bgc" v-if="item.id===chooseBgcId">
							<view class="bgc_info_header" v-if="item.id===chooseBgcId">
								<view class="bgc_info_item">
									<MyIcons size="30rpx" :src="joinSystemPath('jing.png')"/>
									<view class="text_ellipsis">
										{{item.name}}
									</view>
								</view>
								<view class="bgc_info_item">
									<MyIcons size="30rpx" :src="joinSystemPath('hot.png')"/>
									{{item.hotNum}}
								</view>
							</view>
							<view class="scroll-view-item_H">
								<view class="content content_orther">
									<view class="avatar">
										<Avatar :fileName="user_store.userInfo?.user_avatar" size="70rpx" />
									</view>
									<view class="name text_ellipsis" :style="`color:${item.font_color}`">
										{{mineDormitoryInfo?.nick_name_by_dormitory || '您的名字'}}
									</view>
								</view>
								<view class="handle_footer" v-if="item.id===chooseBgcId">
									<MyButton 
										:bgc="primary_shallow_color"
										:borderColor="primary_shallow_color"
										:color="primary_hot_color"
										width="150rpx"
										height="70rpx"
										fontSize="30rpx"
										padding="0 0"
										borderRadius="40rpx"
										:clickFun="clickChangeBtnFun"
									>
										切换
									</MyButton>
									<MyButton
										:bgc="primary_hot_color"
										:borderColor="primary_hot_color"
										width="150rpx"
										height="70rpx"
										fontSize="30rpx"
										padding="0 0"
										borderRadius="40rpx"
										:clickFun="useJoinBgcFun"
									>
										使用
									</MyButton>
								</view>
							</view>
						</view>
					</view>
					<view class="load_box">
						<uni-load-more :content-text="contentText" iconType="circle" :color="primary_hot_color"
							:status="loadingStatus" />
					</view>
				</view>
			</scroll-view>
		</template>
	</view>
</template>

<script setup>
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		ref,
		onUnmounted,
		computed
	} from 'vue'
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		joinSystemPath,
		joinJoinBgcImg
	} from '@/utils/imgJoinName.js'
	import {
		changeNums
	} from '@/utils/changeData.js'
	
	import { DefaultPhone } from '../../../enum/GlobalEnum'
	
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	
	import {
		verifyIsLastOpenPhone
	} from '@/hooks/verify.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store=userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		joiner_color,
		joiner_card_bgc,
		primary_hot_color,
		primary_line_color,
		primary_shallow_color,
		primary_text_color,
		primary_text_hot_color,
		primary_light_color
	} = dynamicStyle_store.dormitoryStyle
	
	const noBindPhone = computed(()=>user_store.userInfo.phone === DefaultPhone)
	
	const bgcTyps=ref([
		{
			id:'1',
			name:'为您推荐'
		},
		{
			id:'2',
			name:'最新皮肤'
		},
		{
			id:'3',
			name:'热度排行'
		},
		{
			id:'4',
			name:'系统默认'
		}
	])
	
	const showBgcTypeIndex = ref('1')
	const scrollWidth = ref('0rpx')
	
	const loadingStatus = ref('more')
	const contentText = ref({
		contentdown: '下滑加载更多',
		contentrefresh: '加载皮肤中',
		contentnomore: '没有更多皮肤了'
	})
	const isAllowGet = ref(true)
	
	const joinBgcList = ref([])
	const query = ref({
		limit:10,
		page:0,
		orderBy:'createAt.desc'
	})
	
	const chooseBgcId = ref('')
	const chooseBgcUrl = ref("url('')")
	
	const mineDormitoryInfo = ref({})
	const timer = ref()
	
	//卡片宽度
	const contentWidth = ref('120rpx')
	const showName = ref('none')
	
	const dormitoryAllId=uni.getStorageSync('homeData')
	
	const clickChangeBtnFun = ()=>{
		if(contentWidth.value==='120rpx'){
			contentWidth.value = '170rpx'
			showName.value = 'block'
		}else{
			contentWidth.value = '120rpx'
			showName.value = 'none'
		}
	}
	
	//使用皮肤
	const useJoinBgcFun = async()=>{
		if(!mineDormitoryInfo.value?.set_join_bgc_count){
			uni.$emit('tips','皮肤修改次数不足，请邀请好友助力得次数','error')
			return
		}
		const {data,success} = await dormitoryModel.setJoinBgc({
			join_bgc_id:chooseBgcId.value
		},dormitoryAllId.relation_id)
		
		if(success){
			uni.$emit('tips',data,'success')
			mineDormitoryInfo.value.set_join_bgc_count = mineDormitoryInfo.value.set_join_bgc_count -1
		}else{
			uni.$emit('tips',data.msg,'error')
		}
	}
	
	const clickHaveHelpList=()=>{
		clearInterval(timer.value)
		uni.navigateTo({
			url:`/pages/Dormitory/helpRecord/helpRecord?type=join_bgc_help&relation_id=${dormitoryAllId.relation_id}`
		})
	}
	const clickInviteHelp=()=>{
		uni.navigateTo({
			url:`/pages/Dormitory/InviteHelp/InviteHelp?relation_id=${dormitoryAllId.relation_id}&share=true&type=join_bgc_help`
		})
		clearInterval(timer.value)
	}
	
	//选择的皮肤
	const chooseBgc=(item)=>{
		contentWidth.value = '120rpx'
		showName.value = 'none'
		chooseBgcId.value = item.id
		chooseBgcUrl.value = `url(${joinJoinBgcImg(item.bgc_url)})`
	}
	
	//绑定手机号成功后的回调
	const bindPhoneCallback=async()=>{
		const {data,success} = await dormitoryModel.postAddSetJoinBgcCount({},dormitoryAllId.relation_id)
		if(success){
			uni.$emit('tips',data,'success')
			getMineEasyDormitoryInfoFun()
			noBindPhone.value = false
		}
	}
	
	const init=()=>{
		contentWidth.value = '120rpx'
		showName.value = 'none'
		loadingStatus.value = 'more'
		isAllowGet.value = true
		joinBgcList.value=[]
		query.value.page = 0
		orderBy:'createAt.desc'
		chooseBgcId.value = ''
		// if(!verifyIsLastOpenPhone()){
		// 	noBindPhone.value && uni.$emit('tips','绑定手机号送皮肤修改次数','success',3000)
		// }
		// noBindPhone.value && uni.$emit('openPhonePopubFlag',bindPhoneCallback,false)
	}
	
	//选择皮肤类型
	const chooseShowBgcType=(item)=>{
		showBgcTypeIndex.value = item
		init()
		let orderBy='createAt.desc'
		switch(item){
			case '1':
				orderBy='createAt.desc'
				break
			case '2':
				orderBy='createAt.desc'
				break
			case '3':
				orderBy='hotNum.desc'
				break
			case '4':
				orderBy='createAt.asc'
				break
		}
		query.value.orderBy = orderBy
		getJoinBgcListFun()
	}
	
	//滑动皮肤列表到底部
	const lowerBgcsFun=()=>{
		if (!isAllowGet.value) return
		query.value.page++
		getJoinBgcListFun()
	}
	
	//获取皮肤列表
	const getJoinBgcListFun=async()=>{
		loadingStatus.value = 'loading'
		const {data,success} = await dormitoryModel.getJoinBgcList(query.value)
		if(success){
			switch(showBgcTypeIndex.value){
				case '4':
					joinBgcList.value = [data[0]]
					isAllowGet.value = false
					loadingStatus.value = 'noMore'
					break
				case '1':
					const _data = data.sort(()=>Math.random()-0.5)
					joinBgcList.value = [...joinBgcList.value,..._data]
					if (!data.length || data.length < query.value.limit) {
						isAllowGet.value = false
						loadingStatus.value = 'noMore'
					} else {
						loadingStatus.value = 'more'
					}
					break
				default:
					joinBgcList.value = [...joinBgcList.value,...data]
					if (!data.length || data.length < query.value.limit) {
						isAllowGet.value = false
						loadingStatus.value = 'noMore'
					} else {
						loadingStatus.value = 'more'
					}
			}
		}
	}
	
	//获取自己在该宿舍的基础信息
	const getMineEasyDormitoryInfoFun = async()=>{
		const {data,success} = await dormitoryModel.getMineEasyDormitoryInfo({},dormitoryAllId.relation_id)
		if(success){
			mineDormitoryInfo.value = data
		}
	}
	
	//获取屏幕信息
	const getScrollFun = ()=>{
		let getWindowInfo = uni.getWindowInfo()
		const paddingLR = 20
		const cardGap = 10
		scrollWidth.value = ((getWindowInfo.windowWidth / 2) + paddingLR*2 + 4*cardGap) + 'rpx'
		console.log(getWindowInfo,scrollWidth.value)
	}
	
	onUnmounted(()=>{
		clearInterval(timer.value)
	})
	
	onShow(()=>{
		init()
		getScrollFun()
		getJoinBgcListFun()
		getMineEasyDormitoryInfoFun()
		timer.value=setInterval(()=>{
			getMineEasyDormitoryInfoFun()
		},2000)
	})
	
	onHide(()=>{
		clearInterval(timer.value)
	})
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.join_bgc_list_box{
		min-height: calc(100vh);
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			padding: 20rpx 0;
			/* #ifndef H5 */
			position: fixed;
			top: 0;
			/* #endif */
			.scroll-view-item_H {
				display: inline-block;
				min-width: 200rpx;
				height: 80rpx;
				text-align: center;
				font-size: 30rpx;
				margin-right: 20rpx;
				.content{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: v-bind(primary_hot_color);
					background-color: v-bind(joiner_card_bgc);
					border-radius: 100rpx;
				}
				.content_active{
					color: #FFFFFF;
					background-color: v-bind(primary_hot_color);
				}
			}
			.scroll-view-item_H:nth-child(1){
				margin-left: 20rpx;
			}
		}
		.scroll-Y {
			height: calc(100vh - 140rpx);
			padding-bottom: 40rpx;
			padding-bottom: 3%;
			/* #ifndef H5 */
			padding-top: 120rpx;
			/* #endif */
			.content{
				padding: 0 3%;
				width: 100%;
				box-sizing: border-box;
				.handle{
					height: 200rpx;
					width: 48.5%;
					float: left;
					margin-bottom: 3%;
					border-radius: 26rpx;
					display: flex;
					flex-wrap: wrap;
					overflow: hidden;
					color: #FFFFFF;
					background-color: v-bind(joiner_color);
					border: 1px solid v-bind(joiner_color);
					.set_count_box{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 1rpx solid v-bind(primary_line_color);
						font-size: 30rpx;
						.count{
							width: 100%;
							text-align: center;
						}
					}
					.invate_help{
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						font-size: 25rpx;
						padding-bottom: 4rpx;
						.item{
							width: 50%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.line{
							border-right: 1rpx solid v-bind(primary_line_color);
							height: 100%;
							margin: 0 4rpx;
						}
					}
				}
				.scroll-view-item{
					height: 500rpx;
					padding-bottom: 3%;
					width: 48.5%;
					.img{
						background-size: cover;
						filter: blur(1000px);
						transition: all 1s;
						z-index: 999;
					}
					.bgc_info{
						position: relative;
						top: -90rpx;
						height: 60rpx;
						font-size: 30rpx;
						padding: 0 20rpx;
						display: flex;
						.item{
							background-color: rgba(0, 0, 0, .2);
							border-radius: 30rpx;
							padding: 0 20rpx;
							max-width: 80%;
							display: flex;
							align-items: center;
							color: #FFFFFF;
							font-size: 25rpx;
						}
					}
					.bgc_info_active{
						display: none;
					}
					.choose_bgc{
						position: relative;
						height: 500rpx;
						top: -515rpx;
						.bgc_info_header{
							height: 100rpx;
							width: 100%;
							margin-top: 20rpx;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							.bgc_info_item{
								width: 90%;
								color: v-bind(primary_light_color);
								display: flex;
								align-items: center;
							}
							.bgc_info_item:nth-child(2){
								color: v-bind(primary_text_hot_color);
							}
						}
						.scroll-view-item_H {
							font-size: 36rpx;
							height: 180rpx;
							width: 100%;
							margin-top: 40rpx;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							.content {
								height: 100%;
								width: v-bind(contentWidth);
								border-radius: 20rpx;
								box-shadow:
									5px 3px 7px rgba(0, 0, 0, .4),
									-7px -7px 12px rgba(255, 255, 255, .9);
								display: flex;
								flex-wrap: wrap;
								justify-content: center;
								align-items: center;
								padding: 0 10rpx;
								font-size: 24rpx;
								transition: all .3s linear;
							}
							.content_default{
								background: v-bind(joiner_card_bgc);
								color: v-bind(joiner_color);
							}
							.content_orther{
								color: #FFFFFF;
								background: v-bind(chooseBgcUrl);
								background-size:cover;
								background-position: center center;
							}
							.avatar {
								display: flex;
								justify-content: center;
								transition: all .3s linear;
							}
						
							.name {
								color: black;
								display: v-bind(showName);
								transition: all .3s linear;
								width: 100%;
								text-align: center;
							}
						}
						.handle_footer{
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 60rpx;
						}
					}
				}
				.scroll-view-item:nth-child(n){
					float: left;
				}
				.scroll-view-item:nth-child(2n){
					float: right;
				}
				.load_box {
					float: left;
					width: 100%;
				}
			}
		}
	}
</style>
